<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>分页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
</head>

<body>
    <div id="page" class="">

        <div id="pageBody" class="scrollbar-hover">


            <div class="container">
                <div id="pageContent">
                    <section>
                        <header>
                            <h3>各种分页导航</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">5</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="bottom">更多</a>
                                    </li>
                                    <li>
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="top" data-url="?page=%">Pager</a>
                                    </li>
                                    <li>
                                        <a href="#">6</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">7</a>
                                    </li>
                                    <li>
                                        <a href="#">8</a>
                                    </li>
                                    <li>
                                        <a href="#">9</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="top">...</a>
                                    </li>
                                    <li>
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <section class="">
                        <header>
                            <h3>禁用的导航</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="pager">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager">Pager</a>
                                    </li>
                                    <li>
                                        <a href="#">118</a>
                                    </li>
                                    <li>
                                        <a href="#">119</a>
                                    </li>
                                    <li>
                                        <a href="#">1110</a>
                                    </li>
                                    <li>
                                        <a href="#">1111</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <br>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>圆角样式</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="pager pager-pills">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-pills">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-pills">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-pills">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="top">...</a>
                                    </li>
                                    <li>
                                        <a href="#">8</a>
                                    </li>
                                    <li>
                                        <a href="#">9</a>
                                    </li>
                                    <li>
                                        <a href="#">10</a>
                                    </li>
                                    <li>
                                        <a href="#">11</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <br>
                            </div>
                        </article>
                    </section>
                    <section>
                        <header>
                            <h3>宽松样式</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="pager pager-loose">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="top">...</a>
                                    </li>
                                    <li>
                                        <a href="#">8</a>
                                    </li>
                                    <li>
                                        <a href="#">9</a>
                                    </li>
                                    <li>
                                        <a href="#">10</a>
                                    </li>
                                    <li>
                                        <a href="#">11</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose pager-pills">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose pager-pills">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose pager-pills">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="#">2</a>
                                    </li>
                                    <li>
                                        <a href="#">3</a>
                                    </li>
                                    <li>
                                        <a href="#">4</a>
                                    </li>
                                    <li>
                                        <a href="#">5</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-loose pager-pills">
                                    <li class="previous">
                                        <a href="#">«</a>
                                    </li>
                                    <li>
                                        <a href="#">1</a>
                                    </li>
                                    <li>
                                        <a href="###" data-toggle="pager" data-placement="top">...</a>
                                    </li>
                                    <li>
                                        <a href="#">8</a>
                                    </li>
                                    <li>
                                        <a href="#">9</a>
                                    </li>
                                    <li>
                                        <a href="#">10</a>
                                    </li>
                                    <li>
                                        <a href="#">11</a>
                                    </li>
                                    <li class="active">
                                        <a href="#">12</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                    <script>
                        function afterPageLoad() {
                            $('#pageContent').on('click', '.pager > li > a', function () {
                                var $item = $(this).parent('li');
                                $item.parent().children('.active').removeClass('active');
                                if (!isNaN(parseInt($item.text()))) {
                                    $item.addClass('active');
                                }
                            });
                        }
                    </script>
                    <section>
                        <header>
                            <h3>两端对齐</h3>
                        </header>
                        <article>
                            <div class="example">
                                <ul class="pager pager-justify">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-justify">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-justify pager-pills">
                                    <li class="previous disabled">
                                        <a href="#">«</a>
                                    </li>
                                    <li class="next">
                                        <a href="#">»</a>
                                    </li>
                                </ul>
                                <ul class="pager pager-justify pager-pills">
                                    <li class="previous">
                                        <a href="#">« 上一页</a>
                                    </li>
                                    <li class="next disabled">
                                        <a href="#">下一页 »</a>
                                    </li>
                                </ul>
                            </div>
                        </article>
                    </section>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>